<template>
  <div class="app-container">
    <el-page-header @back="goBack" :content="getContent()"></el-page-header>
    <!-- 一级病情分类 -->
    <div class="app-container">
      <h2 style="text-align: center;">{{ getTitle() }}</h2>
      <el-steps :active="active" finish-status="success" simple style="margin-bottom: 40px">
        <el-step :title="getOneTitle()" v-if="updateFlag !== 2 && updateFlag !== 3" />
        <el-step :title="getTwoTitle()" v-if="updateFlag !== 1" />
        <el-step :title="getThreeTitle()" v-if="updateFlag !== 1" />
      </el-steps>
      <!-- 添加患者基本入组信息 -->
      <transition name="el-fade-in-linear">
        <patient-basic-info
          @parent-event="setBasic"
          v-show="active === 0"
          v-if="updateFlag !== 2 && updateFlag !== 3"
          ref="basicInfo"
        />
      </transition>

      <!-- 添加患者疾病信息 -->
      <transition name="el-fade-in-linear">
        <patient-disease-info
          @parent-event="setDisease"
          v-show="(updateFlag === 0 && active === 1) 
          || (updateFlag === 2 && active === 0) 
          || (updateFlag === 3 && active === 0)"
          ref="diseaseInfo"
          v-if="updateFlag !== 1"
        />
      </transition>

      <!-- 添加患者诊断及治疗信息-->
      <transition name="el-fade-in-linear">
        <patient-treatment-info
          @close="closeForm"
          v-show="(active === 2 && updateFlag === 0) 
          || (updateFlag === 2 && active === 1) 
          || (updateFlag === 3 && active === 1)"
          ref="treatmentInfo"
          v-if="updateFlag !== 1"
        />
      </transition>
    </div>
  </div>
</template>

<script>
import PatientBasicInfo from "./components/information/patientBasicInfo";
import PatientDiseaseInfo from "./components/information/patientDiseaseInfo";
import PatientTreatmentInfo from "./components/information/patientTreatmentInfo";
export default {
  name: "InfoForm",
  components: {
    PatientBasicInfo,
    PatientDiseaseInfo,
    PatientTreatmentInfo
  },
  data() {
    return {
      patientId: null,
      active: 0,
      diseaseInfoId: null,
      basicInfoId: null,
      updateFlag: 0
    };
  },
  computed: {
    deptId() {
      return this.$store.getters.deptId;
    }
  },
  methods: {
    /** 获取第一部分疾病信息 */
    getOneTitle(){
      if(this.updateFlag !== 1){
        return "添加患者基本入组信息";
      }else{
        return "修改患者基本入组信息";
      }
    },
    /** 获取第二部分标题  */
    getTwoTitle() {
      if (this.updateFlag === 0) {
        return "添加患者疾病信息";
      } else if (this.updateFlag === 2) {
        return "修改患者疾病信息";
      } else if (this.updateFlag === 3) {
        return "新增患者疾病信息";
      }
    },
    getThreeTitle() {
      if (this.updateFlag === 0) {
        return "添加患者诊断治疗信息";
      } else if (this.updateFlag === 2) {
        return "修改患者诊断治疗信息";
      } else if (this.updateFlag === 3) {
        return "新增患者诊断治疗信息";
      }
    },
    /** 动态加载 */
    getTitle() {
      const baseTitle = "患者信息";
      if (this.updateFlag === 0) {
        return "添加" + baseTitle;
      } else if (this.updateFlag === 1 || this.updateFlag === 2) {
        return "修改" + baseTitle;
      } else {
        return "新增" + baseTitle;
      }
    },
    /** 获取页头提示 */
    getContent() {
      if (this.active === 0) {
        return "患者基本入组信息";
      } else if (this.active === 1) {
        return "患者疾病信息";
      } else {
        return "添加患者诊断及治疗信息";
      }
    },
    /** 返回 */
    goBack() {
      // 路由跳转到指定页面
      this.$store.dispatch("tagsView/delView", this.$route).then(() => {
        this.$router.push({
          path: "/gonitis/patient/info"
        });
      });
    },
    /** 设置diseaseInfo组件中的basicId并跳转 */
    setBasic() {
      this.$refs.diseaseInfo.setBasicId();
      this.active = 1;
    },
    /** 设置treatmentInfo组件中的diseaseId并跳转 */
    setDisease() {
      this.$refs.treatmentInfo.setDiseaseId();
      if (this.updateFlag === 2 || this.updateFlag === 3) {
        this.active = 1;
      } else {
        this.active = 2;
      }
    },
    /** 关闭当前页面 */
    closeForm() {
      this.$destroy(); // 主动销毁当前页面
    }
  },
  //生命周期 - 创建完成（可以访问当前 this 实例）
  created() {
    const routerName = this.$route.name;
    const id = this.$route.params.id;
    switch(routerName){
      case "SaveAllInfo" :
        this.updateFlag = 0;
        this.patientId = id;
        this.basicInfoId = null;
        break;
      case "EditBasicInfo" :
        this.updateFlag = 1;
        this.basicInfoId = id;
        break;
      case "EditDiseaseInfo" :
        this.updateFlag = 2;
        this.diseaseInfoId = id;
        break;
      case "SaveDiseaseInfo" :
        this.updateFlag = 3;
        this.basicInfoId = id;
        this.$nextTick(() => {
          this.$refs.diseaseInfo.setBasicId();
        });
        break;
      default :
        this.goBack();
        break;
    }
  }
};
</script>
